<template>
  <div class="container">
    <!-- 操作栏 -->
    <div class="opear_box">
      <el-form ref="form" label-width="80px" inline>
        <el-form-item label="姓名">
          <el-input style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="date" placeholder="选择日期" style="width:200px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" icon="el-icon-edit">修改</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" stripe style="width: 100%;" :border="true" size="mini">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column prop="date" label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="dept" label="部门" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        background
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="1000"
        style="text-align: right;"
      ></el-pagination>
    </div>
    <!-- 新增删除模态框 -->
    <Dialog></Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/formAction/addData";
import { getTestData } from "@/api/test";

export default {
  data() {
    return {
      value: "",
      options: [
        { value: "dept1", label: "总经办" },
        { value: "dept2", label: "技术开发部" },
        { value: "dept3", label: "财务部" },
        { value: "dept4", label: "运维部" },
        { value: "dept5", label: "销售部" },
        { value: "dept6", label: "行政部" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          dept: "软件开发部",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          dept: "销售部",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          dept: "总经办",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          dept: "财务部",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  components: { Dialog },

  computed: {},

  methods: {
    async getDataList() {
      console.log("获取数据");
      let param = {
        name: "毛祥东",
        code: "9527",
      };
      //const res = getTestData(param);//异步输出
      const res = await getTestData(param); //同步输出
      console.log(res);
      console.log("异步输出");
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  padding: 15px;
}
</style>